<template>
	<view class="setting-page">
		<navigation :navigationMsg="navigationMsg"></navigation>
		<view class="main">
			<view class="list-item" v-for="(item,index) in settingList" :key="index" @click="listItem(item,index)">
				<view class="title">
					{{item.title}}
				</view>
				<view class="username" v-if="item.name">
					{{item.name}}
				</view>
				<view class="version" v-if="item.version">
					{{item.version}}
				</view>
				<view class="right-icon" v-if="item.right"></view>
				<view class="avatar" v-if="item.avatar" :style="{ backgroundImage: 'url(' + item.image + ')' }"></view>
			</view>
			<view class="out-login" @click="outLogin">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http,
		uploadFile
	} from '@/api/index.js'
	import navigation from '../../../components/navigation.vue';
	export default {
		data() {
			return {
				navigationMsg: {
					title: "设置"
				},
				settingList: [{
					id: 1,
					title: "头像",
					avatar: true,
					image: ""
				}, {
					id: 2,
					title: "昵称",
					name: "",
					right: true
				}, {
					id: 3,
					title: "账号与安全",
					right: true
				}, {
					id: 7,
					title: "Steam账号管理",
					right: true
				}, {
					id: 8,
					title: "应用版本",
					version: "4.3.3",
					right: false
				}, {
					id: 9,
					title: "关于我们",
					right: true
				}, {
					id: 10,
					title: "检查更新",
					right: true
				}]
			}
		},
		components: {
			navigation
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			//获取会员资料
			getUserInfo() {
				http.post('/api/account/getUserInfo').then(res => {
					this.settingList[1].name = res.nickname
					this.settingList[0].image = res.avatar
				}).catch(err => {
					// console.log(err.data.data);

				})
			},
			//设置列表
			listItem(item, index) {
				if (item.id == 1) {


				} else if (item.id == 2) {
					uni.navigateTo({
						url: "/pages/my/setting/changeName/changeName"
					})
				} else if (item.id == 3) {
					uni.navigateTo({
						url: "/pages/my/setting/Account_Security/Account_Security"
					})
				} else if (item.id == 7) {
					uni.navigateTo({
						url: "/pages/my/steam/steam"
					})
				} else if (item.id == 8) {

				} else if (item.id == 9) {
					uni.navigateTo({
						url: "/pages/my/about_us/about_us"
					})
				} else if (item.id == 10) {
					uni.showToast({
						title: "当前已是最新版本",
						icon: "none",
						duration: 1000
					})
				} else {
					uni.showToast({
						title: "功能暂未开放！",
						icon: "none",
						duration: 1000
					})
				}
			},
			//退出登录
			outLogin() {
				http.post('/api/login/logout').then(res => {
					uni.removeStorageSync('token')
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting-page {
		width: 100%;
		height: 100vh;
		background-color: #f0f3f4;

		.main {
			width: 100%;
			height: calc(100% - 100rpx);
			overflow-y: scroll;

			.list-item {
				width: 100%;
				height: 120rpx;
				background-color: white;
				line-height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				>.title {
					margin-left: 20rpx;
					flex: 1;
				}

				.username,
				.version {
					margin-right: 20rpx;
					font-size: 30rpx;
					color: #7c7c7c;
				}

				.right-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
					background-image: url("../../../static/rightArrow_black.svg");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}

				.avatar {
					width: 90rpx;
					height: 90rpx;
					background-color: black;
					border-radius: 50%;
					margin-right: 20rpx;
					background-image: url("/static/avatar.jpg") !important;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
				}
			}

			>.list-item:nth-child(1) {
				margin-top: 20rpx;
			}

			>.list-item:nth-child(4) {
				margin-top: 20rpx;
			}

			>.list-item:nth-child(6) {
				margin-top: 20rpx;
			}

			>.list-item:nth-child(8) {
				margin-top: 20rpx;
			}

			>.list-item:nth-child(9) {
				margin-top: 20rpx;
			}

			.out-login {
				width: 100%;
				height: 100rpx;
				background-color: white;
				line-height: 100rpx;
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}
</style>